/*
 * @Author: zeki mini
 * @Date: 2021-01-27 13:49:18
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-08-02 16:01:51
 * @Description: 初次登录弹窗
 */

import React, { PureComponent, Fragment } from 'react';

import { View, Text, Image, StyleSheet, BackHandler, TouchableOpacity } from 'react-native';
import { px2dp } from '@/styles';
import { msg, } from '@/common';

const noop = () => {};

export default class FirstLoadAPP extends PureComponent {
  static defaultProps = {
    modal: false,
    // callback
    onDisappear: noop,

  };

  constructor(props) {
    super(props);
    this.state = {
      visible: this.props.visible,
    };
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this._onBackAndroid);
  }

  _onBackAndroid = () => {
    return true;
  };

  render() {
    const { articlesList } = this.props;
    return (
      <View
        style={[
          this.props.style,
          styles.containStyle
        ]}
      >
        <View style={styles.bgw}>
          <Text style={styles.titleStyle}>隐私保护说明</Text>
          <Text style={styles.detalContail}>
            <Text style={styles.nomalTextStyle}>为保障您的个人权益，请先阅读</Text>
            {articlesList.map((item, index) => {
              return (
                <>
                  <Text onPress={() => { this.textOnPress(item.contentCode); }} style={[styles.nomalTextStyle, styles.textStyle]}>
                    《
                    {item.contentTitle}
                    》
                  </Text>
                  {articlesList.length - 1 != index ? (
                    <Text style={styles.nomalTextStyle}>、    </Text>
                  ) : null}
                  {articlesList.length - 2 === index ? (
                    <Text style={styles.nomalTextStyle}>及</Text>
                  ) : null}
                </>
              );
            })}
          </Text>
          <TouchableOpacity
            disabled={false}
            style={[styles.btnStyle, styles.active]}
            onPress={this.conformFunc}
          >
            <Text style={styles.loginText}>同意并继续</Text>
          </TouchableOpacity>
          <TouchableOpacity
            disabled={false}
            style={[styles.btnStyle]}
            onPress={this.cancelFun}
          >
            <Text style={[styles.loginText, { color: '#686764' }]}>不同意并退出</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  textOnPress = (type) => {
    msg.emit('router: goToNext', {
      routeName: 'CustAgreement',
      routerFrom: type
    });
  }

  conformFunc = () => {
  // 发送接口
    this.props.onDisappear(true);
  }

  cancelFun = () => {
    // 取消退出
    this.props.onDisappear(false);
  }
}

const styles = StyleSheet.create({
  containStyle: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(51, 50, 50, 0.5)',
  },
  titleStyle: {
    fontSize: px2dp(17 * 2),
    fontWeight: 'bold',
    color: '#343332',
    marginTop: px2dp(28 * 2)
  },
  nomalTextStyle: {
    color: '#686764',
    fontSize: px2dp(14 * 2),
  },
  textStyle: {
    color: '#BA914A'
  },
  bgw: {
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 8,
    width: '80%',
    // height: px2dp(296 * 2),
    // justifyContent: 'space-around',
    paddingTop: 15,
    paddingBottom: 15,
  },
  detalContail: {
    marginTop: px2dp(16 * 2),
    marginLeft: px2dp(36 * 2),
    marginRight: px2dp(36 * 2),
    lineHeight: px2dp(40),
  },
  iconText: {
    color: '#eee',
    fontSize: 14,
  },
  btnStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    // marginLeft: px2dp(30 * 2),
    // marginRight: px2dp(30 * 2),
    height: px2dp(44 * 2),
    borderRadius: px2dp(44),
    width: px2dp(240 * 2)
  },
  active: {
    backgroundColor: '#BA914A',
    marginTop: px2dp(24 * 2),
  },
  loginText: {
    textAlign: 'center',
    color: 'white',
    textAlignVertical: 'center',
    fontSize: px2dp(16 * 2)
  },
});
